<template>

 <div>
  <Hearder title="品牌管理" listName="品牌列表"></Hearder>
  
  <!-- 搜索 -->
  <el-form :inline="true" class="demo-form-inline">
   <el-form-item label="名称">
     <el-input v-model="search.name" placeholder="品牌名称"></el-input>
   </el-form-item>
   <el-form-item label="首字母">
     <el-input v-model="search.letter" placeholder="品牌首字母"></el-input>
   </el-form-item>
   <el-form-item>
    <el-button type="primary" @click="getBranList">查询</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="pojo= {} , dialogVisible = true">新建</el-button>
  </el-form-item>
</el-form>    
<!-- 对话框 -->
<el-dialog
:title="pojo.id ? '编辑品牌':'新建品牌'"
:visible.sync="dialogVisible"
width="35%"
> 
<el-form :inline="false" class="demo-form-inline" label-width="90px">
 <el-form-item label="品牌名称">
   <el-input v-model="pojo.name" placeholder="品牌名称">{{pojo.name}}</el-input>
 </el-form-item>
 <el-form-item label="品牌首字母">
   <el-input v-model="pojo.letter" placeholder="品牌首字母">{{pojo.letter}}</el-input>
 </el-form-item>
 <el-form-item label="图片">
  <!-- :action="$http.defaults.baseURL+'/upload'"   插件的请求接口-->
            <!-- 由于 el-upload  标签 自带的请求是 ajax 请求 而我们在 http.js 文件夹里面用的axios 请求 设置的 请求头 所以 这个上传文件的接口 要单独设置 请求头 便于上传验证  这里用到了 Vue-mixin
              :headers="getAuthHeaders()" -->
              <el-upload
              class="avatar-uploader"
              action="/api/upload/oss.do?folder=brand"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              >
              <!-- 显示图片 -->
              <img v-if="pojo.image" :src="pojo.image" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="品牌排序">
           <el-input v-model="pojo.seq" placeholder="品牌首字母">{{pojo.seq}}</el-input>
         </el-form-item>
         <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 数据表单      -->
    <el-table
    :data="tableData"
    style="width: 100%; height: 500px;">
    <el-table-column
    label="Id"
    prop="id">
  </el-table-column>
  <el-table-column
  label="Name"
  prop="name">
</el-table-column>
<el-table-column
label="首字母"
prop="letter">
</el-table-column>
<el-table-column
label="Image"
>
<template slot-scope="scope">
  <img :src="scope.row.image" alt="" style="height: 3rem">
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column
align="right">
<template slot-scope="scope">
  <el-button
  size="mini"
  type="text"
  @click="fecthById(scope.row)">编辑</el-button>
  <el-button
  size="mini"
  type="text"
  @click="deleteById(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页条 -->
<div>
  <el-pagination layout="total,prev, pager, next,jumper" :total="total" :page-size="pageSize" @current-change="getBranList"
  @size-change="getBranList"
  :current-page.sync="currentPage"
  >
</el-pagination>
</div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        search: {
        	name: '',
        	letter: ''
        },
        pageSize: 5,  
        currentPage: 1,
        total: 30,
        dialogVisible: false,
        pojo: {
        	image: '',
        	name: '',
        	letter:'',

        },

      }
    },    
    created() {
      this.getBranList();
      
    },
    computed: {

    },
    methods: {
    	//图片上传成功
    	async handleAvatarSuccess(res){
        console.log(res)

          // 由于改变 对象的属性个数  vue 无法及时的渲染  使用使用该方法 第二次遇到该问题
          this.$set(this.pojo,'image',res)
          //  给model 添加一个iocn 属性   
          // this.model.icon = res.url
        },
      //获取品牌列表
      async getBranList() {
       const  res =  await this.$http.post(`/api/brand/findPage.do?page=${this.currentPage}&size=${this.pageSize}`,this.search)
       this.tableData = res.data.rows;
       this.total =  res.data.total;
       console.log(222)
       
     },
       // 新建 与编辑
       async save() {
      	// 通过判断id是否为空来发起不同的请求
        const res = await this.$http.post(`/api/brand/${this.pojo.id == null ? 'add' : 'update'}.do`,this.pojo);
          this.dialogVisible = false;
          // 刷新列表
          this.getBranList();
          this.$message({
            type: 'success',
            message: this.id?'修改成功':'保存成功'
          });
          

        },
        async fecthById(row){
         alert(row.id)
         this.dialogVisible = true
         const res = await this.$http.get(`/api/brand/findById.do?id=${row.id}`)
          // const res = await this.$http.get(`http://localhost:3000/brand?id=${row.id}`)

          this.pojo =  res.data;
          console.log(res)
          
          
        },
        async deleteById(row) {
         this.$confirm('是否确定要删除'+row.name+'品牌?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$http.get(`/api/brand/delete.do?id=${row.id}`)
          // const res = await this.$http.delete(`http://localhost:3000/brand/${row.id}`)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //删除成功 查询获取数据
          this.getBranList()
        })
      }
      
    },
  }
</script>
<style scoped>
.el-pagination {
  width: 300px;
  margin: 0 auto;
}
.avatar-uploader{
 width: 178px;
 border: 1px dashed #d9d9d9;
 border-radius: 6px;
 cursor: pointer;
 position: relative;
 overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>